<template>
  <div class="my-home-page">
    <!--  -->
    <my-header></my-header>
    <!-- 头像 -->
    <div class="my-logo">
      <img src="../../../assets/logo.png" alt="" />
      <!-- <span class="username">id:{{$store.state.uid}}</span> -->
      <span class="username">昵称:{{ $store.state.uname }}</span>
      <span class="jf">
        <van-icon style="color: #000; font-size: 16px" name="location-o" />
        地址:{{ $store.state.dizhi }}
      </span>
    </div>
    <!-- 标签 -->
    <ul class="title">
      <li @click="$router.push('/reservation')">
        <p>我的预约</p>
        <van-icon name="phone-o" />
      </li>
      <li @click="$router.push('/wish')">
        <p>心愿单</p>
        <van-icon name="like-o" />
      </li>
      <!-- <li>
        <p>服装款式</p>
        <van-icon name="bag-o" />
      </li> -->
      <li @click="$router.push('/information')">
        <p>我的资料</p>
        <van-icon name="home-o" />
      </li>
      <li @click="$router.push('/consultservice')">
        <p>客服服务</p>
        <van-icon name="friends-o" />
      </li>
    </ul>
    <van-button
      type="primary"
      v-if="$store.state.uname"
      @click="$store.commit('updataName', '')"
      block
      >退出登录</van-button
    >
    <van-button
      v-if="!$store.state.uname"
      type="primary"
      @click="checkLogin"
      block
      >点击登录</van-button
    >
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
export default {
  components: { MyHeader },
  data() {
    return {
      active: 0,
    };
  },

  //
  methods: {
    checkLogin() {
      this.$router.push("login");
    },
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar__text {
  color: #000;
}
::v-deep .van-icon {
  color: #000;
}
</style>

<style lang="scss" scoped>
.my-home-page {
  .my-logo {
    height: 30vw;
    padding: 20px 0;
    background-image: url("@/assets/img/denglubeijing.jpg");
    height: 40vw;
    img {
      display: block;
      height: 50px;
      margin: 25px auto;
      border: 1px solid #000;
      border-radius: 50%;
    }
    span {
      display: block;
      text-align: center;
    }
    .username {
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
  .title {
    li {
      border-bottom: 1px solid gray;
      padding: 5px 15px;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      .van-icon {
        margin-right: 10vw;
      }
    }
    li:last-child {
      margin-bottom: 20vw;
    }
  }
  .van-button {
    background: #aaa;
    color: #000;
    border-color: #000;
    .van-button__text {
      font-size: 20px;
    }
  }
}
</style>
